<template>
  <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
    <lay-card>
      <lay-row>
        <lay-col :md="24" class="toolbar">
          <lay-col :md="6">
            <span v-if="route.query.Cid">
              <lay-button type="primary" size="sm" @click="add()" v-permission="PerKey.DocPost_AddOrEditView"
                prefix-icon="layui-icon-addition">新增
              </lay-button>
            </span>
          </lay-col>
          <lay-col :md="18">
            <lay-form :model="queryModel" ref="layFormRef">
              <lay-row>
                <lay-col :md="4">
                  <lay-input size="sm" v-model="queryModel.title" style="width: 90%" placeholder="根据标题查询"></lay-input>
                </lay-col>
                <lay-col :md="4">
                  <lay-select size="sm" v-model="queryModel.Cid" placeholder="类别" style="width: 90%">
                    <lay-select-option v-for="cate in catList" :value="cate.id" :label="cate.name">
                    </lay-select-option>
                  </lay-select>
                </lay-col>
                <lay-col :md="3">
                  <lay-select size="sm" v-model="queryModel.status" placeholder="审核状态" style="width: 90%">
                    <lay-select-option value="1" label="已审"></lay-select-option>
                    <lay-select-option value="0" label="未审"></lay-select-option>
                  </lay-select>
                </lay-col>
                <lay-col :md="5">
                    <lay-button size="sm" type="primary" @click="GetList(queryModel)" prefix-icon="layui-icon-search">查询
                    </lay-button>
                    <lay-button size="sm" @click="reset">重置</lay-button>
                </lay-col>
              </lay-row>
            </lay-form>
          </lay-col>
        </lay-col>

        <lay-col :md="24">
          <lay-table :page="page" :columns="columns" :dataSource="dataSource" v-model:selectedKeys="selectedKeys"
            @change="change" :size="tablesize">
            <template v-slot:title="{ data }">
              <lay-space size="xs">
                <span v-if="data.mark > 0" @click="markPreview(data.id)" class="markPreview"><lay-badge theme="blue">
                    {{ dictFind(data.mark) }}</lay-badge></span>
                {{ data.title }}
              </lay-space>
            </template>
            <template v-slot:docNumber="{ data }">
              <lay-space size="xs">
                {{ dateUtil(data.time) }}年 第 {{ data.docNumber }} 号
              </lay-space>
            </template>
            <template v-slot:deptAndName="{ data }">
              <lay-space size="xs">
                {{ data.deptName }} - {{ data.nickName }}
              </lay-space>
            </template>
            <template v-slot:bottons="{ data }">
              <span v-permission="PerKey.DocPost_Mark"><lay-button type="warm" radius @click="mark(data.id)" size="xs">
                  <lay-icon type="layui-icon-flag"></lay-icon></lay-button>
              </span>
            </template>
            <template v-slot:operator="{ data }">
              <lay-button-group>
                <lay-button type="primary" size="sm" @click="edit(data.id, data.cid)"
                  v-permission="PerKey.DocPost_AddOrEditView" prefix-icon="layui-icon-edit">
                  编辑
                </lay-button>
                <lay-button type="danger" size="sm" @click="del(data)" v-permission="PerKey.DocPost_Delete"
                  prefix-icon="layui-icon-delete">删除
                </lay-button>
              </lay-button-group>
            </template>
          </lay-table>
        </lay-col>
      </lay-row>
    </lay-card>

    <lay-layer :title="titleLayer" v-model="layerVis" :resize="true" :area="['800px', '450px']">
      <DocPostMark :docId="docId" v-model:dialogIsOk="dialogIsOk"></DocPostMark>
    </lay-layer>

    <lay-layer :title="titleLayer" v-model="layerVis2" :resize="true" :area="['800px', '350px']">
      <PreviewDocPostMark :docId="docId" v-model:dialogIsOk2="dialogIsOk2"></PreviewDocPostMark>
    </lay-layer>

  </lay-container>
</template>
  
<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne } from "../../../../api/module/oas/docpost";
import { PerKey } from "../../../../library/permissionConst"
import { useRoute, useRouter } from "vue-router";
import Util from '../../../../library/Util'
import DocPostMark from './components/DocPostMark.vue'
import PreviewDocPostMark from './components/PreviewDocPostMark.vue'
//import { useUserStore } from "../../../../store/user"
//const userStore = useUserStore();
const selectedKeys = ref(["1"]);
const page = ref({ total: 0, limit: 15, current: 1, showCount: true, showRefresh: true, limits: [10, 15, 20, 50, 100, 200] });
const tablesize = ref('sm');
const router = useRouter();
const columns = [
  { title: "Id", width: "50px", key: "id", align: "center", },
  { title: "类别", width: "120px", key: "cateName", align: "center", },
  { title: "文号", customSlot: "docNumber", width: "160px", },
  { title: "标题", customSlot: "title" },
  { title: "登记人", customSlot: "deptAndName", width: "120px", align: "center", },
  { title: "登记时间", key: "time", width: "160px", align: "center", },
  { title: "附加", width: "100px", customSlot: "bottons", key: "bottons", align: "center", },
  { title: "操作", width: "200px", customSlot: "operator", key: "operator", align: "center", }
]
const dataSource = ref([])
const route = useRoute();

//定义模型
const putData = reactive({
  formchange: {
    id: 0,
    val: 0,
    Name: "",
    Title: ""
  },
  queryModel: {
    Cid: 0,
    pageNum: page.value.current,
    pageSize: page.value.limit,
    title: null,
    status: null,
    nickName: null,
    startDate: null,
    endDate: null,
    fullTextSwitch: null,
    markStatus: null
  }
})

const { queryModel } = toRefs(putData)
const catList = ref({ targetList: [] as any, })
//获取列表
const GetList = function (query: any) {
  if (query != null) {
    queryModel.value.title = query.title
    queryModel.value.status = query.status
  }
  getList(queryModel.value).then((res) => {
    if (res.status == 1) {
      dataSource.value = res.data.data
      catList.value = res.data.catList
      page.value.total = res.data.count
    }
  })
}

const docMarkType = ref()
docMarkType.value = Util.dictfilter("Sys_Doc_Mark_Type")
const dictFind = (key: number) => {
  return Util.dictFind(docMarkType.value, key);
}

const layFormRef = ref();
const reset = function () {
  layFormRef.value.reset();
}
watch(() => route.query.Cid, (val: any) => {
  queryModel.value.Cid = val;
  queryModel.value.pageNum = 1;
  GetList(queryModel.value)
}, { immediate: true })

const change = function ({ current, limit }: any) {
  queryModel.value.pageNum = current
  queryModel.value.pageSize = limit
  GetList(queryModel.value);
};

const dateUtil = (time: any) => {
  return Util.formatDate(time, 'yyyy')
}
//标记

let docId = ref()
let titleLayer = ref();
const layerVis = ref(false)
const dialogIsOk = ref()
const mark = function (id: number) {
  layerVis.value = !layerVis.value
  titleLayer.value = "标记文件";
  docId.value = id
  dialogIsOk.value = 0
}

watch(dialogIsOk, (val) => {
  if (val == 1) {
    layerVis.value = !layerVis.value
    GetList(queryModel.value)
  }
})


const layerVis2 = ref(false)
const dialogIsOk2 = ref()
const markPreview = function (id: number) {
  layerVis2.value = !layerVis2.value
  titleLayer.value = "标记文件";
  docId.value = id
  dialogIsOk2.value = 0
}

watch(dialogIsOk2, (val) => {
  if (val == 1) {
    layerVis2.value = !layerVis2.value
  }
})

//修改
const edit = function (id: number, cid: number) {
  router.push({ path: '/oas/doc/post/post', query: { Id: id, Cid: cid } })
}
//添加
const add = function () {
  router.push({ path: '/oas/doc/post/post', query: { Id: 0, Cid: route.query.Cid } })
}
//删除
const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + "; " + data.title + " 公文吗？", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList(queryModel.value)
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

</script>
<style scoped>
.markPreview :hover {
  cursor: pointer;
}
.toolbar{margin-bottom: 10px;}
</style>